/* 
 *.list类样式用于设置特定元素（可能是列表展示区域等）的样式属性。
 * 设置字体大小为50px，使该元素内包含的文字以较大字号呈现，能够在页面中较为突出，便于用户快速识别内容。
 * font-weight: 700将字体加粗，进一步增强文字的视觉效果，使其看起来更加醒目、重要，引起用户关注。
 * display: flex把该元素设置为弹性盒子布局模式，这使得可以利用弹性盒子相关属性灵活地排列其内部元素，方便进行页面布局。
 * justify-content: center属性用于让内部元素在水平方向上居中对齐，确保元素内容在水平维度上处于中心位置，整体更显整齐。
 * align-items: center则是让内部元素在垂直方向上也居中对齐，结合水平方向的居中，使得内容在整个元素内处于正中央，布局更美观。
 * margin: 10px auto设置外边距，上下外边距为10px，左右外边距自动计算让元素在水平方向上自动居中，使得该元素在页面中有合适的间隔与位置，不会显得过于拥挤或偏离中心。
 * 设定元素的高度为60px，明确了该元素在垂直方向上所占据的空间大小，有助于维持页面布局的一致性和合理性。
 */
 .list{
  font-size: 50px;
  font-weight: 700;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 10px auto;
  height: 60px;
}

/* 
 *.banner类样式一般用于定义页面中类似横幅、广告展示区等较大展示区域的外观样式。
 * 首先，height: 600px指定了该元素的高度为600px，在页面垂直方向上占据较大空间，以便突出展示相关内容，如图片、宣传语等。
 * background-color: pink将该区域的背景颜色设置为粉色，通过独特的颜色使其在页面中能够迅速吸引用户的目光，与其他部分区分开来。
 * margin: 20px auto设置外边距，上下外边距为20px，左右外边距自动计算实现水平方向自动居中，确保该展示区域在页面中有合适的位置，与周边元素有合理间隔。
 * font-size: 100px把元素内的文字字号设置得很大，达到100px，通常用于展示重要的标题、关键信息等，具有很强的视觉冲击力，能让用户一眼注意到展示的内容。
 * 同样，display: flex将其设置为弹性盒子布局，便于对内部可能存在的多个元素（比如图片和文字说明等）进行灵活布局安排。
 * justify-content: center和align-items: center的作用是让内部元素在水平和垂直方向都分别居中对齐，保证无论内部是何种元素，都能处于该展示区域的正中央，实现最佳的展示效果。
 * color: #fff将文字颜色设置为白色，与粉色的背景形成鲜明对比，使得文字清晰可见，即使在彩色背景下也能保证良好的可读性，提升整体视觉效果。
 */
.banner{
  height: 600px;
  background-color: pink;
  margin: 20px auto;
  font-size: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
}